/* ========================= */
/* White background cards dashboard */
/* ========================= */
.cards-dashboard{background:transparent; min-height:100%; padding:20px}
.intro-card{display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e8eaef; border-radius:12px; padding:16px 18px; margin-bottom:14px; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.intro-title{font-size:18px; font-weight:800; color:#0b1437}
.intro-desc{color:#6b7280; margin-top:4px}
.more-btn{background:#3b5bfd; color:#fff; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; box-shadow:0 6px 14px rgba(59,91,253,.25)}
.more-btn:hover{filter:brightness(1.06)}
.stats-row{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-bottom:16px}

/* 重新设计的现代化卡片 */
.stat-card-modern {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--card-color);
}

.stat-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  flex: 1;
}

.stat-value-modern {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  color: #0b1437;
  letter-spacing: -0.5px;
  line-height: 1;
  transition: all 0.3s ease;
}

.stat-card-modern:hover .stat-number {
  color: var(--card-color);
  transform: scale(1.05);
}

.stat-unit {
  font-size: 14px;
  color: #9ca3af;
  font-weight: 500;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.stat-trend.up {
  background: rgba(17, 167, 117, 0.1);
  color: #11a775;
}

.stat-trend.down {
  background: rgba(233, 79, 79, 0.1);
  color: #e94f4f;
}

.trend-icon {
  font-size: 14px;
}

.stat-card-glow {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.stat-card-modern:hover .stat-card-glow {
  opacity: 1;
}

/* 保留旧样式兼容性 */
.stat-card{background:#fff; border:1px solid #e8eaef; border-radius:12px; padding:16px; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.stat-value{font-size:22px; font-weight:800; color:#0b1437; letter-spacing:.5px}
.stat-delta{margin-top:6px; font-weight:700}
.stat-delta.up{color:#11a775}
.stat-delta.down{color:#e94f4f}

/* WebSocket状态指示器 */
.ws-status-indicator {
  position: fixed;
  top: 80px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #e8eaef;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-size: 12px;
}

.ws-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}

.ws-status-dot.connected {
  background: #52c41a;
  box-shadow: 0 0 8px rgba(82, 196, 26, 0.6);
}

.ws-status-dot.connecting {
  background: #faad14;
  box-shadow: 0 0 8px rgba(250, 173, 20, 0.6);
}

.ws-status-dot.disconnected {
  background: #999;
  box-shadow: 0 0 8px rgba(153, 153, 153, 0.6);
}

.ws-status-text {
  color: #666;
  font-size: 12px;
  font-weight: 500;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.trend-card{background:#fff; border:1px solid #e8eaef; border-radius:12px; padding:14px 16px; box-shadow:0 6px 16px rgba(0,0,0,.05)}
.trend-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.trend-title{font-size:16px; font-weight:800; color:#0b1437}
.trend-actions{display:flex; gap:8px}
.selector{background:#f2f4f8; border:1px solid #e6e8ef; padding:6px 10px; border-radius:8px; color:#4a5568}
.trend-tabs{display:flex; gap:8px; margin:6px 0 10px}
.tab-chip{background:#f6f8ff; color:#3b5bfd; border:1px solid #dbe2ff; padding:6px 10px; border-radius:999px}
.tab-chip.active{background:#3b5bfd; color:#fff; border-color:#3b5bfd}

.trend-body{display:flex; gap:10px; padding:10px 0 4px}
.echart{width:100%; height:300px}
.y-axis{display:flex; flex-direction:column; justify-content:space-between; color:#9aa3b2; font-size:12px; padding-right:6px}
.bars-area{flex:1; display:grid; grid-template-columns:repeat(30, 1fr); align-items:end; gap:6px; height:280px; background:linear-gradient(180deg, #fafbff, #ffffff); border:1px dashed #eef1f7; border-radius:10px; padding:10px}
.bar-stack{display:flex; flex-direction:column; justify-content:flex-end; gap:3px}
.bar-stack i{display:block; border-radius:4px}
.b1{background:#60f0d3}
.b2{background:#ffd64d}
.b3{background:#47a1ff}

.legend-row{display:flex; align-items:center; gap:14px; padding-top:8px; color:#6b7280}
.legend-item{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px}
.legend-item.l1{background:#60f0d3}
.legend-item.l2{background:#ffd64d}
.legend-item.l3{background:#47a1ff}

@media (max-width: 1200px){
  .stats-row{grid-template-columns:repeat(3,1fr)}
  .ws-status-indicator { top: 70px; right: 16px; font-size: 11px; padding: 6px 12px; }
}
@media (max-width: 768px){
  .stats-row{grid-template-columns:repeat(2,1fr)} 
  .bars-area{height:220px}
  .stat-card-modern { padding: 16px; }
  .stat-number { font-size: 24px; }
  .ws-status-indicator { 
    top: 60px; 
    right: 12px; 
    font-size: 10px; 
    padding: 5px 10px; 
  }
  .ws-status-text { display: none; }
}
.landing{min-height:100%;background:radial-gradient(1200px 600px at 20% 10%,#eef2ff 0%,#f4f6ff 35%,#ffeefa 70%,#fff 100%);}
.hero{padding:32px 24px 8px}
.hero-text h1{margin:0;font-size:28px;font-weight:800;color:#1d2129}
.hero-text p{margin:6px 0 14px;color:#86909c}
.hero-btn{display:inline-block;background:#1677ff;color:#fff;padding:8px 14px;border-radius:10px;text-decoration:none}

.canvas{position:relative;padding:12px 24px 40px}
.layer.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(22,119,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(22,119,255,.08) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.1),transparent)}

.desk{position:relative;display:grid;grid-template-columns:1.6fr .9fr;gap:20px;align-items:start}

/* Main screen */
.screen.large{background:linear-gradient(180deg,#1e2a44,#192336);border-radius:16px;box-shadow:0 12px 30px rgba(24,39,75,.25), inset 0 0 0 1px rgba(255,255,255,.08);height:280px;transform:skewY(-3deg) rotate(-1deg);position:relative;overflow:hidden}
.code-lines{position:absolute;inset:16px;display:flex;flex-direction:column;gap:10px}
.code-lines span{height:10px;border-radius:6px;background:linear-gradient(90deg,#3dd9b6,#6ad4ff);opacity:.9;filter:saturate(120%)}
.code-lines span:nth-child(2){width:80%;opacity:.7}
.code-lines span:nth-child(3){width:60%;opacity:.6}
.code-lines span:nth-child(4){width:75%;opacity:.8}
.code-lines span:nth-child(5){width:45%;opacity:.5}

/* Right stack */
.stack{display:grid;gap:16px}
.card{backdrop-filter:blur(8px);background:rgba(255,255,255,.66);border:1px solid rgba(0,0,0,.06);border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.06);padding:14px}
.card .title{font-weight:700;color:#1d2129;margin-bottom:8px}
.card.info ul{margin:0;padding-left:18px;color:#4e5969}
.card.chart .bars{display:flex;gap:6px;height:60px;align-items:flex-end}
.card.chart .bars i{flex:1;height:40px;border-radius:6px;background:linear-gradient(180deg,#8ae9ff,#c2e9fb)}
.card.chart .bars i:nth-child(2){height:55px;background:linear-gradient(180deg,#a8ffdf,#d3ffe6)}
.card.chart .bars i:nth-child(3){height:30px}
.card.chart .bars i:nth-child(4){height:48px}
.card.chart .bars i:nth-child(5){height:36px}
.card.mini{display:flex;align-items:center;gap:10px}
.card.mini .pill{width:90px;height:16px;border-radius:10px;background:linear-gradient(90deg,#ffd6e7,#e4d1ff)}
.card.mini .lines i{display:block;height:6px;width:120px;border-radius:6px;background:#e5e6eb;margin:4px 0}

/* Devices */
.devices{position:absolute;left:10%;top:52%;display:flex;gap:18px}
.device{background:#fff;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04)}
.device.monitor{width:140px;height:92px}
.device.tablet{width:90px;height:120px}
.device.phone{width:54px;height:90px;border-radius:16px}

/* Chat bubbles */
.chat{position:absolute;right:6%;bottom:6%;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.bubble{max-width:280px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06);color:#1d2129}
.bubble.reply{background:#e6f4ff;border-color:#bfdbfe}

@media (max-width: 992px){
  .desk{grid-template-columns:1fr}
  .devices{position:static;order:2}
  .chat{position:static;order:3;align-items:flex-start;margin-top:8px}
}

/* ========================= */
/* Big-screen dark dashboard */
/* ========================= */
.bigscreen{min-height:100%;padding:12px;background:radial-gradient(1000px 500px at 50% -10%,rgba(38,67,138,.6),transparent 60%),#0b1020;color:#d7e3ff}
.bs-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;margin-bottom:10px;border:1px solid rgba(77,122,255,.35);border-radius:10px;background:linear-gradient(180deg,rgba(28,43,82,.8),rgba(18,28,58,.6));box-shadow:0 8px 30px rgba(26,74,178,.25) inset}
.bs-title{font-size:18px;letter-spacing:.5px;color:#e7f0ff;text-shadow:0 0 8px rgba(64,140,255,.35)}
.bs-link{color:#7ab8ff;text-decoration:none;border:1px solid rgba(96,164,255,.4);padding:6px 10px;border-radius:8px}

.bs-grid{display:grid;grid-template-columns:320px 1fr 320px;gap:12px}
.panel{display:flex;flex-direction:column;gap:12px}
.widget{border:1px solid rgba(77,122,255,.25);border-radius:12px;background:linear-gradient(180deg,rgba(22,30,62,.9),rgba(15,22,46,.85));box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 30px rgba(3,10,28,.65);padding:12px}
.widget-title{font-weight:700;color:#9fc7ff;margin-bottom:10px}
/* Digital human widget */
.widget.avatar{display:flex;flex-direction:column}
.avatar-canvas{height:260px;border:1px solid rgba(77,122,255,.25);border-radius:10px;overflow:hidden;background:radial-gradient(360px 180px at 50% 20%,rgba(48,84,180,.3),rgba(16,28,60,.6));}

/* Gauge */
.gauge .gauge-ring{width:160px;height:160px;margin:8px auto;border-radius:50%;background:conic-gradient(#2fe6b2 0 310deg, #203050 0 360deg);display:grid;place-items:center;box-shadow:0 0 20px rgba(47,230,178,.25)}
.gauge .gauge-core{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#11223d,#0e162f);font-weight:800;color:#2fe6b2}
.legend{display:flex;justify-content:space-between;margin-top:8px;gap:8px;font-size:12px;color:#a8b8d8}
.legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.legend .dot.green{background:#2fe6b2}
.legend .dot.yellow{background:#ffd666}
.legend .dot.red{background:#ff7875}

/* Table widget */
.table .table-head,.table .table-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:6px 8px;border-radius:8px}
.table .table-head{background:rgba(48,84,180,.35);color:#cfe2ff;border:1px solid rgba(64,120,255,.3)}
.table .table-row{background:rgba(19,34,70,.6);border:1px solid rgba(64,120,255,.15);margin-top:6px}
.table .ok{color:#2fe6b2}
.table .busy{color:#ffd666}

/* Stage */
.stage{position:relative;border:1px solid rgba(77,122,255,.35);border-radius:14px;background:linear-gradient(180deg,#0f1c3a,#0b142a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 20px 40px rgba(9,19,44,.65)}
.stage-inner{height:420px;border-radius:12px;margin:10px;background:radial-gradient(500px 220px at 50% 20%,rgba(36,77,170,.7),rgba(16,34,84,.5) 60%,rgba(10,18,40,.6));position:relative;overflow:hidden}
.stage-inner:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(64,120,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(64,120,255,.12) 1px,transparent 1px);background-size:48px 48px;opacity:.6}
.label{position:absolute;padding:6px 10px;border-radius:10px;background:rgba(7,17,40,.85);border:1px solid rgba(97,158,255,.35);color:#cfe2ff;font-size:12px}
.label.floating{box-shadow:0 0 14px rgba(45,120,255,.35)}
.stage-tabs{display:flex;gap:8px;position:absolute;left:18px;bottom:64px}
.tab{background:rgba(32,52,98,.6);border:1px solid rgba(96,150,255,.3);color:#cfe2ff;padding:6px 10px;border-radius:8px}
.tab.active{background:#23408f}
.stage-actions{position:absolute;right:18px;bottom:64px;display:flex;gap:10px}
.btn{background:rgba(23,42,86,.7);border:1px solid rgba(97,158,255,.35);color:#e3eeff;padding:6px 12px;border-radius:8px}

/* KPI sliders */
.sliders .slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:8px 0}
.sliders .name{color:#cfe2ff}
.sliders .bar{height:8px;background:rgba(21,36,72,.9);border:1px solid rgba(64,120,255,.2);border-radius:999px;overflow:hidden}
.sliders .bar i{display:block;height:100%;background:linear-gradient(90deg,#2fe6b2,#7ab8ff)}
.sliders .val{color:#9fc7ff}

/* Right list */
.list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.list li{background:rgba(19,34,70,.6);border:1px solid rgba(64,120,255,.15);padding:8px;border-radius:8px}
.tag{display:inline-block;min-width:24px;text-align:center;margin-right:8px;border-radius:6px;padding:2px 6px;font-size:12px}
.tag.danger{background:#ff4d4f22;color:#ff7875;border:1px solid #ff787544}
.tag.warn{background:#faad1422;color:#ffd666;border:1px solid #ffd66644}
.tag.info{background:#1677ff22;color:#7ab8ff;border:1px solid #7ab8ff44}

@media (max-width: 1200px){.bs-grid{grid-template-columns:280px 1fr 280px}}
@media (max-width: 992px){.bs-grid{grid-template-columns:1fr}.stage-inner{height:340px}}
